<template>
  <d2-container>
    <div class="page" ref="home">
      <div class="banner-wrap">
        <swiper
          :options="swiperOptionv"
          ref="mySwiperv"
          class="swiper-container"
          @slideChange="slideChange"
        >
          <swiper-slide>
            <div class="banner-first">
              <div class="page-top">
                <div class="page-top-title">{{ homeObj.title }}</div>
                <div class="page-top-subtitle">{{ homeObj.subTitle }}</div>
                <div class="page-top-btn">
                  <div
                    class="page-item-left-btn home"
                    @click="routerPush('/timbreLibrary')"
                  >
                    <span>立即体验</span>
                  </div>
                </div>
              </div>
              <div class="page-bottom">
                <ul>
                  <li v-for="(item, ind) in countrys" :key="ind">
                    <div class="page-bottom-top">
                      <img class="flag-icon" :src="item.img" alt="" />
                      <span v-if="ind === 0">原声</span>
                      <p v-if="ind === 0">点击试原始声音</p>

                      <audio
                        :src="item.value"
                        class="audio"
                        :id="`audio${ind}`"
                        @canplaythrough="audioLoad(item, ind, 'audio')"
                      ></audio>
                      <img
                        v-if="!item.play"
                        :src="playImg"
                        class="play-icon"
                        alt=""
                        @click="playAudio(item, ind, 'audio')"
                      />
                      <img
                        v-else
                        :src="pauseImg"
                        class="play-icon"
                        alt=""
                        @click="playAudio(item, ind, 'audio')"
                      />
                    </div>

                    <div class="page-bottom-bottom">
                      <span>{{ item.time }}</span>
                      <span>试听 {{ item.name }}</span>
                    </div>
                  </li>
                </ul>
                <div><span>敬请期待</span></div>
              </div>
              <div class="page-bottom-icon" @click="handleClick({}, 1)">
                <img :src="downImg" alt="" />
              </div>
              <video
                ref="video"
                class=""
                autoplay
                loop
                muted
                :src="homeObj.video"
              ></video>
            </div>
          </swiper-slide>

          <swiper-slide
            class="banner-box"
            v-for="(item, ind) in list"
            :key="ind"
          >
            <div class="page-item">
              <div v-if="ind === 3" class="page-item-imgs">
                <video
                  ref="video"
                  class="lottieAnimation video"
                  autoplay
                  loop
                  muted
                  v-if="ind === 3"
                  :src="item.path"
                ></video>
                <div class="page-item-bgs">
                  <img
                    :src="`${imageUrl}/image/home/img_0.png`"
                    class="img_0"
                    alt=""
                  />
                  <img
                    :src="`${imageUrl}/image/home/img_1.png`"
                    class="img_1"
                    alt=""
                  />
                  <img
                    :src="`${imageUrl}/image/home/img_2.png`"
                    class="img_2"
                    alt=""
                  />
                </div>
              </div>

              <lottieAnimation
                class="lottieAnimation"
                v-if="ind % 2 === 1 && ind !== 3"
                :path="item.path"
              />
              <div class="page-item-left" :class="{ right: ind % 2 === 1 }">
                <div>
                  <div
                    class="page-item-left-title"
                    :class="{ borderRight: item.title !== item.initTitle }"
                  >
                    {{ item.title }}
                  </div>
                  <p class="page-item-left-content">{{ item.comment }}</p>
                </div>

                <span class="page-item-left-btn" @click="routerPush(item.page)"
                  >立即体验</span
                >
                <div class="page-item-left-bottom">{{ item.use }}</div>
              </div>
              <lottieAnimation
                class="lottieAnimation"
                v-if="ind % 2 === 0 && ind !== 3"
                :path="item.path"
              />
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="page-middle-content">
              <div class="page-middle-title">
                智能AI，更在意品质<span></span>
              </div>
              <div class="page-middle-subtitle">
                在Ai模型创新的同时我们更专注于提升音质，为你提供优质的听觉体验
              </div>
              <div class="page-middle-btn">
                <span
                  class="page-item-left-btn middle"
                  @click="routerPush('/timbreLibrary')"
                  >立即体验</span
                >
              </div>
              <div class="page-middle-list" v-if="hideDev ? activeIndV === 1 : activeIndV === 5">
                <div v-for="(item, ind) in meritList" :key="ind">
                  <span>{{ item.name }}：</span>{{ item.comment }}
                </div>
              </div>
              <div class="page-middle-list" v-if="hideDev ? activeIndV === 1 : activeIndV === 5">
                <div v-for="(item, ind) in meritListBottom" :key="ind">
                  <span>{{ item.name }}：</span>{{ item.comment }}
                </div>
              </div>
              <!-- <div class="page-bottom-title">
              公司邮箱：Alrensheng@163.com <span>|</span> 微信客服：LFC01923342
              <span>|</span> 关于我们 <span>|</span> 隐私协议
              <span>|</span> 用户协议 <span>|</span> 我要反馈
            </div>
            <div class="page-bottom-subtitle">
              网络文化经营许可证 粤网文[2023]1543-112号 粤ICP备13078413号
              <img :src="`${imageUrl}/image/common/china.png`" alt="" />
              粤公网安备44010602000197号 增值电信业务许可证
              粤B2-20240136出版物经营许可证 新出发穗批字第4401100762
            </div>
            <div class="page-bottom-subtitle middle">
              ©2015-2024 至远悦读（广州）文学信息技术有限公司 版权所有
              <span></span> 客服电话：400-109-3755 <span></span> 营业执照
              <span></span> 违法和不良信息举报：400-109-3755
              <span></span> kefu@idc.ucweb.com <span></span>
              网络内容从业人员违法违规行为专项举报
            </div> -->
              <div class="page-bottom-subtitle bottom">
                备案号：京ICP备2025113824号-1
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>

      <div class="page-item-tab" v-show="activeIndV !== 0 && activeIndV !== 5 && !hideDev">
        <div
          v-for="(item, ind) in tabList"
          :key="ind"
          @click="handleClick(item, ind)"
          :class="{
            active: activeIndV === ind,
          }"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </d2-container>
</template>

<script>
import { computed, watch } from "vue";
import lottieAnimation from "./components/lottieAnimation";
import { request } from "@/api/_service.js";
import util from "@/libs/util.js";
import router from "@/router/index";
import { hideDev } from "@/api/coinType.js";

export default {
  components: {
    lottieAnimation,
  },
  data() {
    let meritList = [
      {
        name: "智能模型",
        comment: "算法模型多样，适配各种不同音频",
      },
      {
        name: "功能丰富",
        comment: "无论您的需求多么复杂，轻松分离出每一种音频元素",
      },
      {
        name: "快速分离",
        comment: "在线上传，云端服务，快速方便提取",
      },
      {
        name: "试听预览",
        comment: "在线试听，直到满意后下载，提升效率",
      },
      {
        name: "操作简单",
        comment: "仅需三步，即可进行音频提取操作，无需学习",
      },
      {
        name: "安全加密",
        comment: "您的数据安全就如同国家的重要机密一般，受到最高级别的保护",
      },
    ];

    return {
      hideDev: hideDev,
      now: null,
      imageUrl: process.env.VUE_APP_IMAGE,
      activeIndV: 0,
      swiperOptionv: {
        direction: "vertical",
        effect: "slide",
        fade: true,
        speed: 800,
        mousewheel: true,
        // API
        pagination: {
          el: ".swiper-pagination-h",
          clickable: true,
        },
      },
      playImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/play-1.png`;
      }),
      pauseImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/pause-1.png`;
      }),
      homeObj: {
        title: "AI音频神器",
        subTitle: "5秒分离人声&10秒克隆你的声音",
        video: `${process.env.VUE_APP_IMAGE}/image/home/home-bg1.mp4`,
      },
      downImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/home/down.png`;
      }),
      countrys: [
        {
          name: "原声",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/original.png`;
          }),
        },
        {
          name: "中文",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/china.png`;
          }),
        },
        {
          name: "英文",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/usa.png`;
          }),
        },

        {
          name: "韩语",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/korea.png`;
          }),
        },
        {
          name: "西班牙语",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/spain.png`;
          }),
        },
        {
          name: "法语",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/france.png`;
          }),
        },
        {
          name: "日语",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/japan.png`;
          }),
        },
      ],
      tabList: [
        "多语言转化",
        "人声克隆生成",
        "音频降噪",
        "音频人声分离软件",
        "适配提取音频",
      ],
      list: [
        {
          title: "",
          initTitle: "人声克隆生成",
          index: 0,
          comment:
            "AI智能算法无损提取音频中的人声，一健导出你想要的音频格式，如mp3、m4a、avi等。自定义选择音频质量，一健下载无损音频",
          use: "使用场景：简单干练的文案，用户易于理解",
          path: `${process.env.VUE_APP_IMAGE}/image/home/clone.json`,
          page: "voiceClone",
        },
        {
          title: "",
          initTitle: "音频降噪",
          index: 0,
          comment:
            "任意音视频的伴奏提取，无需费时寻找；音视频去除背景杂音，降噪提取人声；人声消除，保留原音乐伴奏；",
          use: "使用场景：简单干练的文案，用户易于理解",
          path: `${process.env.VUE_APP_IMAGE}/image/home/denoise.json`,
          page: "audioDenoising",
        },
        {
          title: "",
          initTitle: "音频人声分离软件",
          index: 0,
          comment:
            "任意音视频的伴奏提取，无需费时寻找；音视频去除背景杂音，降噪提取人声；人声消除，保留原音乐伴奏；",
          use: "使用场景：简单干练的文案，用户易于理解",
          path: `${process.env.VUE_APP_IMAGE}/image/home/vocalSeparation.json`,
          page: "musicSeparation",
        },
        {
          title: "",
          initTitle: "适配提取音频",
          index: 0,
          comment:
            "任意音视频的伴奏提取，无需费时寻找；音视频去除背景杂音，降噪提取人声；人声消除，保留原音乐伴奏；",
          use: "使用场景：简单干练的文案，用户易于理解",
          path: `${process.env.VUE_APP_IMAGE}/image/home/home-bg2.mp4`,
          page: "extractingAudio",
        },
      ],
      meritList: [...meritList],
      meritListBottom: [...meritList.reverse()],
    };
  },
  mounted() {
    if(this.hideDev) this.list = []
    request({
      url: "/mapi/index/index",
      method: "post",
      data: {
        token: util.cookies.get("token"),
      },
    }).then((ret) => {
      console.log(ret, "requestrequest");
    });
    this.getVideoList();
  },
  beforeDestroy() {
    // clearInterval(this.timeInterval)
  },
  methods: {
    formatTimeToHHMMSS(seconds) {
      var hours = Math.floor(seconds / 3600);
      seconds %= 3600;
      var minutes = Math.floor(seconds / 60);
      var remainingSeconds = parseInt(seconds % 60);

      return (
        hours.toString().padStart(2, "0") +
        ":" +
        minutes.toString().padStart(2, "0") +
        ":" +
        remainingSeconds.toString().padStart(2, "0")
      );
    },
    audioLoad(item, index, dom) {
      // console.log(item,index,[document.getElementById(`audio${index}`)], "audioLOad");
      document.getElementById(`${dom}${index}`);
      item.time = this.formatTimeToHHMMSS(0);
      item.totalTime = this.formatTimeToHHMMSS(
        document.getElementById(`${dom}${index}`).duration
      );
    },
    playAudio(item, index, dom) {
      let audio = document.getElementById(`${dom}${index}`);
      clearInterval(item.t);
      if (audio.paused) {
        this.countrys.map((i, ind) => {
          if (ind === index) {
            item.play = true;
            audio.play();
            item.t = setInterval(() => {
              item.time = this.formatTimeToHHMMSS(audio.currentTime);
              console.log(111);
              if (parseInt(audio.currentTime) === parseInt(audio.duration)) {
                item.play = false;
                item.time = this.formatTimeToHHMMSS(0);
                audio.pause();
                clearInterval(item.t);
              }
            }, 1000);
          } else {
            clearInterval(i.t);
            i.play = false;
            document.getElementById(`${dom}${ind}`).pause();
          }
        });
      } else {
        clearInterval(item.t);
        item.play = false;
        audio.pause();
      }
    },

    getVideoList() {
      request({
        url: "/mapi/index/indexAudioList",
        method: "post",
        data: {},
      }).then((ret) => {
        console.log(ret, "22222222");
        this.countrys = this.countrys.map((i, ind) => {
          let obj = {};
          ret.data.map((item, index) => {
            if (i.name === item.remark) {
              obj = item;
            }
          });
          return {
            totalTime: "00:00:00",
            time: "00:00:00",
            play: false,
            t: null,
            ...obj,
            ...i,
          };
        });

        console.log(this.countrys, "this.countrys");
      });
    },
    routerPush(path) {
      router.push(path);
    },
    slideChange() {
      console.log(
        this.$refs.mySwiperv,
        "margin: 21vh 54px 0px;margin: 21vh 54px 0px;"
      );
      this.activeIndV = this.$refs.mySwiperv.swiper.realIndex;
      if (![0, 5].includes(this.activeIndV)) {
        this.list[this.activeIndV - 1].title = "";
        this.list[this.activeIndV - 1].index = 0;
        setTimeout(() => {
          this.typingText(this.list[this.activeIndV - 1]);
        }, 1000);
      }
    },
    handleClick(item, ind) {
      this.$refs.mySwiperv.swiper.slideTo(ind);
    },
    typingText(item) {
      // console.log(111);
      // 如果还有字符未显示，则继续显示下一个字符
      if (item.index < item.initTitle.length) {
        item.title += item.initTitle.charAt(item.index);
        item.index++;
        setTimeout(() => this.typingText(item), 250); // 递归调用type函数，并设置延迟
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes caret {
  50% {
    border-color: transparent;
  }
}

@keyframes moveRight {
  0% {
    transform: translatex(0);
    /* 起始位置 */
  }

  100% {
    transform: translatex(-1300px);
    /* left: calc(100% - 100px); 结束位置，减去元素宽度以避免溢出 */
  }
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.page {
  height: 100%;
  // overflow: auto;
  color: #ffffff;
  position: relative;

  .banner-wrap {
    width: 100%;
    height: 100%;

    .swiper-container {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .banner-box {
        width: 100%;
        height: 100%;
        padding: 21vh 54px 20px;
        box-sizing: border-box;
      }
    }
  }

  .banner-first {
    height: 100%;
    position: relative;
    // width: calc(100% + 62px);
    // left: -36px;
    .page-top {
      height: calc(100% - 187px);
      text-align: center;
      font-size: 50px;
      line-height: 69px;
      font-family: AlibabaPuHuiTiH;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .page-top-title {
        margin-bottom: 16px;
      }
      .page-top-subtitle {
        margin-bottom: 40px;
      }

      .page-top-btn {
        display: flex;
        justify-content: center;
      }
    }
    .page-bottom {
      width: 100%;
      height: 143px;
      position: absolute;
      bottom: 40px;
      left: 0;
      padding: 0 20px;
      display: flex;
      justify-content: center;
      & > ul {
        max-width: calc(100% - 60px);
        padding: 5px 5px 0;
        overflow-x: auto;
        white-space: nowrap;
        margin: 0;
        li {
          display: inline-block;
          list-style: none;
          width: 180px;
          height: 125px;
          position: relative;
          cursor: pointer;
          .page-bottom-top {
            margin-bottom: 8px;
            height: 100px;
            padding-top: 11px;
            padding-left: 8px;
            & > span {
              font-size: 16px;
              color: #ffffff;
              line-height: 22px;
              position: relative;
              z-index: 5;
            }
            & > p {
              margin: 0;
              margin-top: 4px;
              font-size: 12px;
              color: #ffffff;
              line-height: 16px;
              position: relative;
              z-index: 5;
            }
            .flag-icon {
              width: 100%;
              height: 100px;
              position: absolute;
              left: 0;
              top: 0;
            }
            .play-icon {
              width: 32px;
              height: 32px;
              left: 136px;
              top: 57px;
              position: absolute;
              cursor: pointer;
              z-index: 5;
            }
            &:hover {
              animation: shake 0.5s 1;
            }
          }
          .page-bottom-bottom {
            // font-family: AlibabaPuHuiTiM;
            font-size: 12px;
            color: #ffffff;
            line-height: 17px;
            opacity: 0.4;
            display: flex;
            justify-content: space-between;
          }
        }
        li + li {
          margin-left: 16px;
        }
      }
      & > div {
        width: 50px;
        height: 100px;
        margin-top: 5px;
        margin-left: 15px;
        border-radius: 8px;
        background-image: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.3)
        );
        // backdrop-filter: blur(10px);
        font-size: 13px;
        color: #ffffff;
        line-height: 19px;
        padding: 1px;

        & > span {
          box-sizing: border-box;
          border-radius: 8px;
          background: #222125;
          display: block;
          width: 100%;
          height: 100%;
          padding: 10px 16px;
        }
      }
    }

    video {
      width: calc(100% - 10px);
      // height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

    .page-bottom-icon {
      width: 84px;
      height: 44px;
      position: absolute;
      bottom: 0px;
      left: calc(50% - 42px);
      cursor: pointer;
      img {
        width: 84px;
        height: 44px;
      }
    }
  }

  .page-item-tab {
    height: 62px;
    width: 880px;
    position: absolute;
    top: 38px;
    left: calc(50% - 440px);
    z-index: 999999;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    display: flex;
    border: 1px solid #898996;
    border-radius: 16px;

    & > div {
      width: 176px;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      opacity: 0.6;
      cursor: pointer;

      &.active,
      &:hover {
        opacity: 1;
      }
    }
  }

  .page-item {
    max-height: 620px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, rgb(7, 4, 24), rgb(14, 8, 46)),
      linear-gradient(to bottom, #27154d, #1c1066);
    display: flex;
    justify-content: space-between;

    .page-item-left {
      width: 43%;
      padding: 8% 40px 5% 8%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .page-item-left-title {
        display: inline-block;
        padding-right: 10px;
        font-weight: bold;
        font-size: 40px;
        line-height: 55px;
        height: 55px;
        text-align: left;
        border-right: none;
        white-space: nowrap;
        /* 防止文字换行 */
        overflow: hidden;

        &.borderRight {
          animation: caret 1s steps(1) infinite;
          border-right: 0.15em solid #fff;
        }
      }

      .page-item-left-content {
        font-size: 20px;
        line-height: 31px;
        opacity: 0.6;
      }

      .page-item-left-bottom {
        line-height: 27px;
        font-size: 20px;
        color: #4d6dff;
      }

      &.right {
        padding-left: 40px;
        padding-right: 8%;
      }
    }

    .page-item-imgs {
      width: 57%;
      aspect-ratio: 4 / 3;
      /* 宽高比4:3 */
      border-radius: 16px;
      display: flex;
      justify-content: center;
      align-self: center;
      position: relative;

      .page-item-bgs {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 74%;
        /* 宽高比4:3 */
        aspect-ratio: 32 / 19;
        border-radius: 16px;
        background: radial-gradient(
          circle at center,
          transparent 30%,
          rgba(22, 15, 67, 0.8) 70%,
          rgba(22, 15, 67, 1) 100%
        );
        border: 2px solid #1f1962;

        .img_0 {
          width: 35%;
          position: absolute;
          top: -33%;
          right: -11%;
        }

        .img_1 {
          width: 35%;
          position: absolute;
          bottom: -33%;
          left: -11%;
        }

        .img_2 {
          width: 20%;
          // height: 14.8%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .lottieAnimation {
      width: 74%;
      /* 宽高比4:3 */
    }

    .video {
      // background: rgb(11, 6, 37);
    }
  }

  .page-item-left-btn {
    font-size: 20px;
    width: 150px;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 27px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    background: transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(177deg, #2b186e 0%, #120c69 99%),
      linear-gradient(164deg, rgba(67, 39, 165, 1), rgba(25, 14, 159, 1));

    &:hover {
      background-image: linear-gradient(177deg, #2b186e 0%, #120c69 99%),
        linear-gradient(177deg, #2b186e 0%, #120c69 99%);
    }

    &.middle {
      width: 216px;
      height: 68px;
      font-size: 24px;
      border-width: 2px;
      border-radius: 16px;
      background-image: linear-gradient(131deg, #823ad7 0%, #482cd0 100%),
        linear-gradient(159deg, rgba(136, 45, 255, 1), rgba(45, 17, 178, 1));

      &:hover {
        background-image: linear-gradient(
            159deg,
            rgba(136, 45, 255, 1),
            rgba(45, 17, 178, 1)
          ),
          linear-gradient(159deg, rgba(136, 45, 255, 1), rgba(45, 17, 178, 1));
      }
    }
    &.home {
      width: 150px;
      height: 53px;
      font-size: 24px;
      background: #fff;
      & > span {
        display: inline-block;
        background-image: linear-gradient(
          47.14069635924239deg,
          #ca4bff 0%,
          #2c71ff 100%
        );
        -webkit-background-clip: text; /* 仅对webkit浏览器有效 */
        color: transparent;
      }
      &:hover {
        opacity: 0.8;
      }
    }
  }

  .page-middle-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
  }

  .page-middle-title {
    font-size: 50px;
    line-height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      display: inline-block;
      width: 4px;
      height: 57px;
      background: #3e2ec7;
      border-radius: 2px;
      margin-left: 10px;
    }
  }

  .page-middle-subtitle {
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    margin-top: 30px;
    opacity: 0.6;
  }

  .page-middle-btn {
    margin-top: 70px;
    margin-bottom: 10vh;
    display: flex;
    justify-content: center;
  }

  .page-bottom-title {
    text-align: center;
    font-size: 14px;
    line-height: 20px;

    span {
      padding: 0 14px;
    }
  }

  .page-bottom-subtitle {
    margin-top: 25px;
    text-align: center;
    font-size: 12px;
    color: #999999;
    line-height: 18px;

    img {
      width: 22px;
      height: 24px;
    }

    span {
      padding: 0 2px;
    }

    &.middle {
      margin-top: 17px;
    }

    &.bottom {
      margin-top: 32px;
    }
  }

  .page-middle-list {
    position: relative;
    width: 3000px;
    height: 64px;
    overflow-y: hidden;
    overflow-x: auto;
    margin-bottom: 30px;
    animation: moveRight 15s linear infinite;
    & > div {
      margin-right: 30px;
      box-sizing: border-box;
      position: relative;
      display: inline-block;
      padding: 0 30px;
      height: 64px;
      line-height: 64px;
      background: linear-gradient(
        135deg,
        rgba(98, 40, 204, 0.4) 0%,
        rgba(35, 72, 202, 0.2) 100%
      );
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #b6b3c1;
      span {
        color: #fff;
      }
    }
  }
}
</style>
